<template>
    <div class="product-infos">
        <!-- 搜索框 -->
        <div class="search-box flex-center flex-between">
            <div class="search-left flex-center" @click="back">
                <i class="van-icon van-icon-arrow-left van-nav-bar__arrow"></i><span class="van-nav-bar__text">返回</span>
            </div>
            <div class="search-right">
                <van-search
                v-model="search"
                show-action
                :placeholder="title"
                @search="onSearch"
                >
                    <template #action>
                        <div @click="onSearch">搜索</div>
                    </template>
                </van-search>
            </div>
        </div>
        <!-- 下拉选择 -->
        <div class="select-box">
            <van-dropdown-menu class="dropdown-pro" active-color="#1989fa">
                <van-dropdown-item v-model="form2.one" :options="option1" @change = "changeChose"/>
                <van-dropdown-item v-model="form2.two" :options="option2" @change = 'changeChose'/>
                <van-dropdown-item title="筛选" ref="item">
                    <div class="form-box">
                        <div class="flex-between price-box mb-20" style="width: 100%;">
                            <span class="price">价格区间</span>
                            <div class="box-ju">
                                <input type="number" @input="input_change1" v-model="form.priceStart" placeholder="最低价格">
                                    <span class="split">—</span>
                                <input type="number" @input="input_change2" v-model="form.priceEnd" placeholder="最高价格">
                            </div>
                            
                        </div>
                        <div class="time-box">
                            <van-field
                            readonly
                            clickable
                            name="datetimePicker"
                            :value="form.timevalue"
                            label="时间选择"
                            placeholder="点击选择时间"
                            label-width="65px"
                            @click="showPicker = true"
                            />
                            <van-popup v-model="showPicker" position="bottom">
                            <van-datetime-picker
                                type="datetime"
                                @confirm="onConfirm"
                                @cancel="showPicker = false"
                            />
                            </van-popup>
                        </div>    
                        <div class="fotter-box">
                            <van-button type="info" size="small" round  class="mt-20" @click="SubmitBtn">提交</van-button>
                            <van-button size="small" round  class="mt-20" @click="calce">重置</van-button>
                        </div>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
    </div>
</template>
<script>
export default {
  name:'Search',
  data() {
    return {
        // 时间选择器显示隐藏
        showPicker: false,
        // input输入框
        search:null,
        // 筛选
        form:{
            priceStart:null,
            priceEnd:null,
            timevalue:null,
        },
        form2:{
            one:0,
            two:0,
        },
        // 确认搜索
        cloneSearch:null,
        cloneForm:{},
        cloneForm2:{}
    };
  },
  props:{
    title:{
        type:String,
        default:()=>{
            return ""
        }
    },
    option1:{
        type:Array,
        default:()=>{
            return []
        }
    },
    option2:{
        type:Array,
        default:()=>{
            return []
        }
    }
  },
  mounted() {
    this.cloneSearch = this.search
    this.cloneForm = JSON.parse(JSON.stringify(this.form))
    this.cloneForm2 = JSON.parse(JSON.stringify(this.form2))
  },
  methods: {
    // 价格区间
    input_change1(){

    },
    input_change2(){

    },
    // 选择日期
    onConfirm(time) {
    //   this.form.timevalue = time;
      this.showPicker = false;
      var date = time;
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var h = date.getHours().toString().padStart(2, "0");
      var m = date.getMinutes().toString().padStart(2, "0");
 
      let currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        h +
        seperator2 +
        m;  
 
     this.form.timevalue = currentdate;
    },
    // 提交赛选
    SubmitBtn(){
        this.cloneForm = JSON.parse(JSON.stringify(this.form))
        let obj = {
            search:this.cloneSearch,
            ...this.cloneForm,
            ...this.cloneForm2
        }
        this.$emit('getData',obj)
        this.$refs.item.toggle();
    },
    // 重置赛选
    calce(){
        this.form.priceStart = null
        this.form.priceEnd = null
        this.form.timevalue = null
    },
    changeChose(){
        this.cloneForm2 = JSON.parse(JSON.stringify(this.form2))
        let obj = {
            search:this.cloneSearch,
            ...this.cloneForm,
            ...this.cloneForm2
        }
        this.$emit('getData',obj)
    },
    // 搜索框
    onSearch(val) {
        this.cloneSearch = this.search
        let obj = {
            search:this.cloneSearch,
            ...this.cloneForm,
            ...this.cloneForm2
        }
        this.$emit('getData',obj)
    },
    back(){
        this.$router.back()
    }
  },
}
</script>
<style scoped lang="scss">
.product-infos{
    width: 100%;
    border-bottom: 1px solid #ececec;
}
.search-box{
    width: 100%;
    height: 46px;
    padding: 0 16px;
    background-color: #fff;
    .search-left{
        width: 48px;
        .van-nav-bar__arrow{
            color: #1989fa;
        }
    }
    .search-right{
        width: calc(100% - 60px);
        .van-search{
            padding: 0;
        }
    }

    .van-search__content {
        background-color: #f7f7f7;
    }
}
.select-box{
    width: 100%;
    height: 48px;
}
.form-box{
    width: 100%;
    padding: 10px;
    height: 160px;
    .van-cell--clickable{
        padding: 0;
    }
    .van-cell::after {
        border: none;
    }
    .van-cell{
        background-color: transparent;
    }
}
.price-box{
    input{
        width: 40%;
        height: 30px;
        line-height: 20px;
    }
    ::-webkit-input-placeholder {
        color: rgb(206, 206, 206);
    }
    .price{
        display: inline-block;
        width: 56px;
        line-height: 30px;
    }
    .split{
        line-height: 30px;
    }
    .box-ju{
        width: calc(100% - 76px);
        display: flex;
        justify-content: space-between;
    }
}
.time-box{
    width: 100%;
}
.time-box::v-deep .van-field__value{
  border: 1px solid #ccc !important;
}
.mt-20{
    margin-top: 20px !important;
    width: 80px;
    margin: 20px 5px 0 5px;
}
.fotter-box{
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>
<style>
.dropdown-pro .van-dropdown-menu__bar{
  background-color: #fff !important;
  box-shadow: none !important;
}
.dropdown-pro .van-ellipsis{
  font-size: 14px;
}
.dropdown-pro .van-dropdown-menu__bar--opened{
    z-index: 1 !important;
}
.form-box .van-field__value{
    border: 1px solid rgb(133, 133, 133) !important;
    padding: 0 5px;
    background-color: rgb(255, 255, 255);
    height: 30px;
}
.form-box .van-field__value .van-field__body{
    height: 28px;
}
</style>